﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>项目成员</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <link href="../../Content/project/project.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #divMemberList
        {
            overflow: hidden;
            min-width: 500px;
            margin-top: 10px;
            display: block;
            text-align: center;
        }
        #divMemberLeaderList
        {
            width: 72px;
            height: 82px;
            margin: 10px;
        }
        #divCreatorList
        {
            width: 72px;
            height: 82px;
            margin: 18px 10px 10px 10px;
        }
        .divCreatorInfo
        {
            border: 2px solid #708090;
            border-radius: 4px;
            -webkit-border-radius: 4px;
        }

        .divMemberInfo
        {
            width: 72px;
            height: 82px;
            margin: 10px;
            float: left;
            color: #333;
            border-radius: 4px;
            -webkit-border-radius: 4px;
        }
        
        .divMemberInfo:hover
        {
            background-color: #4a99d0;
            color: #fff;
            cursor: pointer;
        }
        .divMemberInfo:hover p
        {
            color: #fff;
        }
        
        .imgPhoto
        {
            width: 48px;
            height: 48px;
            padding: 5px;
        }
        .btn-close
        {
            float: right;
            margin: -98px 0 0 55px;
            z-index: 99;
            position: absolute;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">

    <script src="../../Scripts/Project/projectTab.js" type="text/javascript"></script>

    <script type="text/javascript">
        //************* URL常量
        var URL_UPDATE_PROJECT_MEMBERSTRING = '/project/DoUpdateProjectMemberString';
        //************* 全局变量

        var g_Var = {
            "userIdList":[],
            'removedUserList': [],
            'project' :null,
            'timeOutMark': null,
            'isMemberChanged':false,

        };

    //************* 常量定义
    var DoUpdateProjectMemberString = $.AsyncMethod(URL_UPDATE_PROJECT_MEMBERSTRING, 'post');

    //************* Accessor访问器
    var EzAccessor = {};

function CreateAccessor() {
    //实现服务器交互方法
    EzAccessor = {
        "getProjectInfo": function () { 
            return <%= WebJsonExtension.ToJson(Model.ProjectInfo) %>;
        }
    };
}

function displayNoMemberContent() {
    if (g_Var.userIdList.length <= 2) {
        $('<p id="no-member" class="no-items">还没有团队成员，<a>点击这里</a>添加团队成员</p>')
            .appendTo('#divMemberCommonList')
            .find('a').click(function () { 
                    $('#pnlEditMembers').userSelector('toggle');
                } );            
    }
}

function bindProjectInfo(project)
{
    showProjectInfo(project);
    
    //项目负责人
    bindProjectLeader(project.Leader);
    //项目创建者
    bindProjectCreator(project.Creator);
    //成员列表
    bindMemberlist(project.MemberList);
}

function resetUserSelector() {
    $('#pnlEditMembers').userSelector('reset');
    $('#pnlEditMembers').userSelector('removeUsers', g_Var.userIdList.join(','));    
}

function bindProjectLeader(leader) {
    bindMemberLeader(leader);
 }

function bindProjectCreator(creator) {
    g_Var.userIdList.push(creator.Member.Id);   
    
    var dom = getUserLabelDom(creator.Member, "创建者", 'divCreatorInfo')

    $(dom).appendTo('#divCreatorList');    
}
     
function bindMemberlist(memberList){
    for(var key in memberList){
        if(memberList[key].Role == "member"){
            bindMemberCommon(memberList[key].Member);   
        }
    }    
    displayNoMemberContent();   
}


function getUserLabelDom (member, labelString, className) {
    var dom = $('<div id="member-{userId}" class="{className}" title="<center><p>{labelString}</p><p>{posName} ({deptName})</p></center>"></div>'
                    .replace("{posName}", member.Position.Description)
                    .replace("{deptName}", member.Dept.DeptName)
                    .replace("{labelString}", labelString)
                    .replace("{className}", className)
                    .replace("{userId}", member.Id));
                    
    var photoStr = '<img class="imgPhoto" src="/core/headicon/{userId}" alt="headicon" />'
                        .replace("{userId}", member.Id);

    var nameStr = '<p class="txtMember">{userName}</p>'
                    .replace("{userName}", member.Name);

    $(dom).append(photoStr)
             .append(nameStr)

             .qtip({
                    position: {
                        my: 'top center',  
                        at: 'bottom center' 
                    }
                });
    return dom;
}


function bindMemberLeader(leader){
    g_Var.userIdList.push(leader.Member.Id);   
    
    var dom = getUserLabelDom(leader.Member, "项目负责人", 'div-leaderinfo')

    $(dom).appendTo('#divMemberLeaderList');
}

function bindMemberCommon(member){
    g_Var.userIdList.push(member.Id);
    
    var dom = getUserLabelDom(member, "项目成员", 'divMemberInfo')
   
    $(dom)
        .data("userId", member.Id)
        .data("member", member)
             
        .appendTo('#divMemberCommonList')             
             
        .hover(function () {
            var _self = $(this);
            var removeDomStr =  '<a onclick="removeMemberFromTeam(\'{userId}\')" class="btn-close"><img src="../../Content/images/close_pop.png" style="border:0px; widht:24px; height:24px;" class="btn_close"alt="Close" /></a>';
            removeDomStr = removeDomStr.replace("{userId}", _self.data("userId"))
            _self.append(removeDomStr);
        },function () {
            $('.btn-close').remove();
        });
}

function removeMemberFromTeam(userId){

    $(g_Var.userIdList).each ( function (index, item) {
        if (item == userId)
        {
            var member = $('#member_'+userId).data("member");           
            g_Var.userIdList.splice(index,1);
            g_Var.removedUserList.push(member);   

            $('#member-' + userId).remove();
            
            onMembersChanged();
         }
    });

    displayNoMemberContent();
};


function submitProjectMembers()
{
    var memberString = g_Var.userIdList.join(',');
    g_Var.isMemberChanged = false;
    DoUpdateProjectMemberString(
        function(e){
            if (e.Info.length > 0) $.displayStatusInfo(e);
        },
        {'projectId': g_Var.project.Id,'memberString': memberString}
    );
}


function onMembersChanged() {
    $('#divMemberList').trigger('membersChanged');      
}

function showProjectInfo(project){
    if (PorjectInfo) {
        PorjectInfo.Show(project);
    }
}

//初始化页面
function initPage() {
    EzTipsManager.addTipBox('#tip_Remind', 'tipRemind');
    EzTipsManager.showTipBox('tipRemind');

    $('#pnlEditMembers').userSelector({
        preOpenSelectPanel: resetUserSelector,
        selectorPanelClosed: function (e, arg) {
            var str = "";
            // 把选择了的人显示出来
            $(arg.Users).each(function (index, item) {
                $('#no-member').remove();
                bindMemberCommon(item);
            });

            if(arg.Users.length > 0)  {
                onMembersChanged();
            }
        },
        offsetX: -250,
        offsetY: 20
    });

    // 把当前MemberList里面的人选中
    // 把负责人Disable

    CreateAccessor();
    g_Var.project = EzAccessor.getProjectInfo();

    bindProjectInfo(g_Var.project);
}


//初始化事件
function initPageEvent() {

    $('#tabs').projectTab(g_Var.project, 'link-team');

    $('#divMemberList').bind('membersChanged', function (){
        if (g_Var.timeOutMark) {
            clearTimeout(g_Var.timeOutMark);
        }
        g_Var.timeOutMark = setTimeout("submitProjectMembers()", 1500);
        g_Var.isMemberChanged = true;
    });

}

$(function () {
    initPage();
    initPageEvent();
});

    </script>
    <script>
        window.onbeforeunload = function () {
            if (g_Var.isMemberChanged) {
                submitProjectMembers();
                return "成员变更还未保存，请选择留在此页以便保存";
            }
        };
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <div id="links">    <a href="/project/ProjectList" class="head">返回项目列表</a>
        </div>
        <% Html.RenderPartial("_projectInfo"); %>
        <div id="tabs"></div>
    </div>
    <div id="page-body">
        
        <div style="float: right;">
            <span id="pnlEditMembers">添加成员</span>
        </div>
        <div id="divMemberList">
            <div style="float: left;">
                <div id="divMemberLeaderList">
                </div>
                <div id="divCreatorList">
                </div>
            </div>
            <div id="divMemberCommonList" style="margin-left: 108px;">
            </div>
        </div>
        <div class="page-submit">
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
    <div id="shortcuts" class="box">
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_Remind" style="display: none;">
        <h1>
            小贴士:</h1>
        <p class="indent">
        </p>
    </div>
</asp:Content>
